<template>
	<diyBase>
		<template #left="{}">
			<div v-loading="loading">
				<div class="header" :style="{backgroundImage: 'url(' + styleBgImage + ')'}">
					<div class="user">
						<img class="avatar" v-if="pageInfo.user_avatar" :src="getUrl(pageInfo.user_avatar)" alt="avatar" />
						<div class="login">立即登录</div>
					</div>
				</div>
				<view class="center-content">
					<view class="card">
						<el-row justify="space-between" gutter="5">
							<el-col span="6">
								<view class="card-item">
									<el-image :src="plugin_icon" class="w-[50px] h-[50px]" />
									<view class="text">插件市场</view>
								</view>
							</el-col>
							<el-col span="6">
								<view class="card-item">
									<el-image :src="gitee_icon" class="w-[50px] h-[50px]"></el-image>
									<view class="text">Gitee地址</view>
								</view>
							</el-col>
						</el-row>
					</view>
					<view
						class="list content-item"
						:class="{
							active: pageInfo.active == 'nav',
							horizontal: personData.nav.style.service_style == 1,
							vertical: personData.nav.style.service_style == 2,
						}"
						@click="changeItem('nav')"
					>
						<view class="list-item" v-for="(item, index) in personData.nav.list" :key="index" :class="`w-nav-${personData.nav.style.service_count}`">
							<el-image v-if="item.icon" :src="getUrl(item.icon)" class="mr-2 w-[24px] h-[24px]"></el-image>
							<view class="text">{{ item.name }}</view>
							<SvgIcon v-if="personData.nav.style.service_style == 2" name="ele-ArrowRight" size="16" class="mt-1" />
						</view>
					</view>
					<div class="content-item mt-2 mr-[5px] ml-[5px]" :class="{ active: pageInfo.active == 'image' }" @click="changeItem('image')">
						<el-carousel :height="`${personData.image.style.height}px`">
							<el-carousel-item v-for="(item, index) in personData.image.list" :key="index">
								<img class="w-full h-full" v-if="item.image_url" :src="getUrl(item.image_url)" />
							</el-carousel-item>
						</el-carousel>
					</div>
				</view>
			</div>
		</template>
		<template #right="{}">
			<diyCenterNav ref="diyCenterNavRef" @getData="getNavData" />
			<diyCenterImage ref="diyCenterImageRef" @getData="getImageData" />
		</template>
		<template #footer="{}">
			<el-button v-auth="'diy/setPersonCenterData'" type="primary" @click="handleSubmit">保存</el-button>
		</template>
	</diyBase>
</template>
<script lang="ts" setup name="decorationPerson">
import { reactive, ref, onMounted,computed } from 'vue';
import { messageSuccess } from '/@/utils/message';
import { getUrl } from '/@/utils/util';
import { diySetPersonCenter, diyGetPersonCenter } from '/@/api/diy';
import diyBase from '/@/views/decoration/mobile/component/diyBase.vue';
import diyCenterNav from '/@/views/decoration/mobile/component/diyCenterNav.vue';
import diyCenterImage from '/@/views/decoration/mobile/component/diyCenterImage.vue';
import plugin_icon from '/@/assets/plugin_icon.png';
import gitee_icon from '/@/assets/gitee_icon.png';

const diyCenterNavRef = ref();

const diyCenterImageRef = ref();

const personData = reactive({
	nav: {
		style: {
			service_style: 1,
			service_count: 3,
		},
		list: [
			{
				name: '',
				icon: '',
				link: '',
			},
		],
	},
	image: {
		style: {
			height: '',
		},
		list: [
			{
				name: '',
				image_url: '',
				link: '',
			},
		],
	},
});

const pageInfo = reactive({
	user_avatar: '',
	person_center_top: '',
	active: 'nav',
	style_identify: 'blue'
});

const loading = ref(true);
const styleBgImage = computed(() => {
	return new URL(getUrl('/resource/admin/images/mobile_' + pageInfo.style_identify + '_bg.png'), import.meta.url).href;
});

const getData = async () => {
	const data = await diyGetPersonCenter({ type: 1 });
	const navData = data.data?.nav;
	if (navData) {
		for (const key in personData.nav) {
			if (navData[key] != null && navData[key] != undefined) {
				personData.nav[key] = navData[key];
			}
		}
	}

	const imageData = data.data?.image;
	if (imageData) {
		for (const key in personData.image) {
			if (imageData[key] != null && imageData[key] != undefined) {
				personData.image[key] = imageData[key];
			}
		}
	}

	const infoData = data?.info;
	if (infoData) {
		for (const key in pageInfo) {
			if (infoData[key] != null && infoData[key] != undefined) {
				pageInfo[key] = infoData[key];
			}
		}
	}

	diyCenterNavRef.value.setData(personData.nav);
	diyCenterImageRef.value.setData(personData.image);
	changeItem(pageInfo.active);
	loading.value = false;
};

const getNavData = (data: any) => {
	personData.nav = data;
};

const getImageData = (data: any) => {
	personData.image = data;
};

const changeItem = (active: string) => {
	pageInfo.active = active;
	if (active == 'nav') {
		diyCenterNavRef.value.changeDiv(true);
		diyCenterImageRef.value.changeDiv(false);
	}
	if (active == 'image') {
		diyCenterImageRef.value.changeDiv(true);
		diyCenterNavRef.value.changeDiv(false);
	}
};

// 保存提交
const handleSubmit = async () => {
	await diySetPersonCenter({ type: 1, data: personData });
	getData();
	messageSuccess('设置成功');
};

onMounted(() => {
	getData();
});
</script>
<style lang="scss" scoped>
.diy-box {
	.header {
		display: flex;
		justify-content: space-between;

		width: 100%;
		height: 200px;
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.user {
			display: flex;
			align-items: center;
			padding: 6px 15px 60px 20px;

			.avatar {
				width: 50px;
				height: 50px;
				border-radius: 50%;
			}

			.login {
				margin-left: 10px;
				padding: 4px;
				width: 85px;
				font-size: 14px;
				border: 1px solid #ffffff;
				border-radius: 25px;
				text-align: center;
				color: #ffffff;
			}
		}

		.other {
			padding-top: 15px;
			padding-right: 15px;
		}
	}

	.center-content {
		position: absolute;
		left: 0px;
		top: 130px;
		z-index: 0;
		margin: 0px 10px;
		width: calc((100% - 10px) - 10px) !important;

		.card {
			.card-item {
				width: 150px;
				margin: 5px;
				padding: 5px;
				background-color: rgb(255, 255, 255);
				overflow: hidden;
				border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: space-around;
				flex-direction: column;
				text-align: center;
				position: relative;
				background-position: center;
				background-repeat: no-repeat;
				box-shadow: 0 2px 6px rgba(26, 26, 26, 0.15);

				.text {
					margin-top: 3px;
					font-size: 14px;
				}
			}
		}

		.content-item {
			border: 2px rgb(220 223 230) dashed;
		}

		.content-item.active {
			border: 2px var(--el-color-primary) dashed;
		}

		.list {
			margin: 10px 5px 5px;
			width: calc((100% - 5px) - 5px) !important;
			overflow: hidden;
			border-radius: 6px;
			box-shadow: rgb(31 31 31 / 16%) 0px 1px 3px;
			display: flex;
			flex-wrap: wrap;
		}

		.list.vertical {
			.list-item {
				width: 100%;
				position: relative;
				display: flex;
				padding: 10px;
				justify-content: flex-start;
				align-content: center;
				align-items: stretch;
				background-color: white;

				a {
					display: flex;
				}

				.text {
					flex: 1;
					padding: 2px 0 2px 6px;
					display: flex;
					justify-content: space-between;
					flex-direction: row !important;
					align-items: center;
					font-size: 14px;
				}

				&::after {
					content: ' ';
					width: 200%;
					height: 200%;
					position: absolute;
					top: 0;
					left: 0;
					border-radius: inherit;
					transform: scale(0.5);
					transform-origin: 0 0;
					pointer-events: none;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				}
			}
		}

		.list.horizontal {
			align-items: center;
			padding: 7px 0;
			background-color: white;

			.list-item {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				margin: 9px 0;
				.text {
					margin-top: 5px;
				}
			}

			.w-nav-3 {
				width: 33.3333%;
			}

			.w-nav-4 {
				width: 25%;
			}

			.w-nav-5 {
				width: 20%;
			}
		}
	}
}
</style>
